<template>
    <div>
        <Button type="primary" @click="addData">添加用户</Button>
        <Button type="error" @click="delAll">删除选中</Button>
        <Input v-model="valuein" placeholder="请输入要搜索的用户名" style="width: 300px"></Input>
        <Button type="primary" shape="circle" icon="ios-search" @click="search">搜索</Button>
        <Button type="primary" shape="circle" @click="recovery">还原</Button>
        <scroll :height="600">
            <Table border :columns="columns7" @on-selection-change="selected" :data="list"></Table>
        </scroll>
        <Page :total="filter.total" show-total size="small" show-elevator show-sizer @on-page-size-change="pageSizeChange" :page-size-opts='set'  @on-change='changePage' :current='this.filter.current'  :page-size='size' placement="top"></Page>

        <Modal
            v-model="modal1"
            title="用户管理"
            @on-ok="ok()"
            @on-cancel="cancel()"
            :styles="{top:'35px'}"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="头像" prop="pic">
                    <div class="demo-avatar">
                        <Avatar shape="square" icon="person" size="large" :src="formValidate.picurl"/>
                    </div>
                </FormItem></br>
                <FormItem label="上传" prop="picurl">
                    <upload
                        class="v1"
                        accept="image/png,image/jpeg"
                        image-class="v1-image"
                        input-class="v1-input"
                        disable-preview
                        placeholder="点击我上传头像"
                        :max-size="customImageMaxSize"
                        @size-exceeded="onSizeExceeded"
                        @file="onFile"
                        @load="onLoad" >
                    </upload>
                </FormItem>
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formValidate.password" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="mail">
                    <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
                </FormItem>
                <FormItem label="介绍" prop="desc">
                    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import Base from '../common/Base.js';
import VueBase64FileUpload from 'vue-base64-file-upload';
    export default {
        mixins:[Base],
        components: {
            upload:VueBase64FileUpload
        },
        data () {
            return {
                columns7: [
                    {
                        type:'selection',
                        width:60,
                        align:'center'
                    },
                    {
                        title: '头像',
                        key: 'picurl',
                        width:160,
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    attrs:{
                                        src:params.row.picurl
                                    },
                                    style: {
                                        width:'120px',
                                        height:'100px'
                                    }
                                }, ''),
                            ])
                        }
                    },
                    {
                        title: '用户名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '密码',
                        key: 'password',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.password)
                            ]);
                        }
                    },
                     {
                        title: '邮箱',
                        key: 'mail',
                     },
                     {
                        title: '自我介绍',
                        key: 'desc',
                     },
                      {
                        title: '时间',
                        key: 'date',
                     },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.modal1=true;
                                            this.itid=params.row._id;
                                            this.editData(params.row._id);
                                            
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row._id);
                                            this.$Message.success('删除成功!');
                                            this.changePage();
                                            this.getData();
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                title:'用户管理',
                module:'users',
                find:'name',
                customImageMaxSize:10,
                formValidate: {
                    picurl:'',
                    name: '',
                    password:'',
                    mail: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true,min: 2, message: '用户名不能小于两位', trigger: 'blur' }
                    ],
                    password: [
                        { required: true,min: 3, message: '密码不能小于3位', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        created(){
            this.getData();
        },
        methods: {
            cleanInput(){
                this.formValidate.name='';
                this.formValidate.password='';
                this.formValidate.mail='';
                this.formValidate.desc='';
                this.formValidate.picurl=''
            },
            getInput(response){
                console.log(response);
                this.formValidate.name=response.data.name;
                this.formValidate.password=response.data.password;
                this.formValidate.mail=response.data.mail;
                this.formValidate.desc=response.data.desc;
                this.formValidate.picurl=response.data.picurl;
            },
            onFile(file) {
                console.log(file); // file object
            },
            onLoad(dataUrl) {
                this.formValidate.picurl=dataUrl;
                console.log('dataUrl is ready!'); // data-uri string
            },
            onSizeExceeded(size) {
                alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`);
            }
        }
    }
</script>

<style scoped>
    .ivu-avatar-image{
        width:120px;
        height:120px;
    }
</style>

